<template>
	<w-container class="page-bg pa-16 pb-16">
		<w-navbar title=" "></w-navbar>
		<w-tabs :tabList="tabList" @change="change"></w-tabs>
		<view class="flex flex-ai-center item font-color-999 plr-16" >
			<view class="ranking ">排名</view>
			<view class="niceName">用户</view>
			<view class="price text-right">返佣金额</view>
		</view>
		<view v-for="(item,index) in list" :key="index" :class="index == 0?'one':index == 1?'two':index == 2?'three':''" class="flex flex-ai-center item font-color-999 mt-8 br-8 plr-16" >
			<view class="ranking">
				<w-icon v-if="index == 0" name="ranking-one" size="20"></w-icon>
				<w-icon v-else-if="index == 1" name="ranking-two" size="20"></w-icon>
				<w-icon v-else-if="index == 2" name="ranking-three" size="20"></w-icon>
				<view v-else>{{index + 1<10?'0' + (index + 1):index + 1}}</view>
			</view>
			<view class="niceName text-overflow">{{item.nickname}}</view>
			<view class="price text-right">{{item.com_price}}</view>
		</view>
		<w-loading v-if="!list.length" type="empty" emptyType="search" emptyTop="100"></w-loading>
	</w-container>
</template>

<script>
	import { commison_rank } from "@/api/user/index"
	export default {
		data() {
			return {
				tabList:[
					{
						name:'日排行',
						type:1
					},
					{
						name:'周排行',
						type:2
					},
					{
						name:'月排行',
						type:3
					}
				],
				type:1,
				list:[],
				my_commsion:0,
				my_rank:''			
			}
		},
		onLoad(){
			this.getList()
		},
		methods: {
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				commison_rank({type:this.type}).then( res => {
					const {list,my_commsion,my_rank} = res.data
					this.list = list
					this.my_commsion = my_commsion
					this.my_rank = my_rank
				}).catch( err => {})
			},
			change({type}){
				this.type = type
				this.getList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		height: 80rpx;
	}
	.ranking {
		width:20%;
	}
	.niceName {
		width:30%
	}
	.price {
		width:50%;
	}
	.one {
		background: linear-gradient(180deg, #8F4F25 0%, #F8931F 100%);
	}
	.two {
		background: linear-gradient(180deg, #6C3816 0%, #A3641B 100%);
	}
	.three {
		background:linear-gradient(180deg, #4B260D 0%, #613B11 100%);
	}
</style>
